<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="align: center;">
    <fieldset >
        <div class="form-group">
            <label class="col-md-2 control-label">姓名</label>
            <div class="layui-input-inline">
                <input class="form-control" placeholder="姓名" type="text" name="name" id="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">年龄</label>
            <div class="layui-input-inline">
                <input class="form-control" placeholder="年龄" type="number" name="age" id="age">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">地址</label>
            <div class="layui-input-inline">
                <input class="form-control" placeholder="地址" type="text" name="address" id="address">
            </div>
        </div>
        <div class="form-actions">
            <div class="row" align="center">
                <div class="col-md-12">
                    <button class="btn btn-primary" onclick="location.href='index.html'">返回</button>
                    <button class="btn btn-primary" type="submit" onclick="update(this)">
                        <i class="fa fa-save"></i> 修改
                    </button>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<input class='form-control' placeholder='序号' type='hidden' name='id' id='id'>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    //获取url后的参数值
    function getUrlParam(key) {
        var href = window.location.href;
        var url = href.split("?");
        if(url.length <= 1){
            return "";
        }
        var params = url[1].split("&");

        for(var i=0; i<params.length; i++){
            var param = params[i].split("=");
            if(key == param[0]){
                return param[1];
            }
        }
    }
    //编辑拿到的id
    var id = getUrlParam("id");
    console.log(id)
    if(id != ""){
        $.ajax({
            type : 'get',
            url : '/customer/'+id,
            success : function(data) {
                $("#id").val(data.id);
                $("#name").val(data.name);
                $("#age").val(data.age);
                $("#address").val(data.address);

            }
        });
    }

    //form序列化为json
    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    function update() {
        var id = $("#id").val();
        var name = $("#name").val();
        var age = $("#age").val();
        var address = $("#address").val();
        if(name.trim() == ""){
            layer.msg("姓名不能为空")
            return;
        }
        if(age.trim() == ""){
            layer.msg("年龄不能为空")
            return;
        }
        if(address.trim() == ""){
            layer.msg("地址不能为空")
            return;
        }
        var formdata = $("#form").serializeObject();
        formdata.id = id;
        formdata.name = name;
        formdata.age = age;
        formdata.address = address;

        $.ajax({
            type : 'put',
            url : '/customer',
            contentType: "application/json; charset=utf-8",
            data : JSON.stringify(formdata),
            success : function(data) {
                layer.msg("修改成功", {shift: -1, time: 1000}, function(){
                    location.href = "index.html";
                });
            }
        });
    }

</script>
</body>
</html>